<template>
  <div>
    <el-image
      style="width: 100px; height: 100px; border: 1px solid #cccccc; align-self:center; margin: 10px;"
      :src="storeIcon"
      fit="contain"
    ></el-image>
    <br />

    <div style="border: 2px solid #cccccc;">
      <div style="margin: 2px;">
        <el-row>
          <el-col :span="4">
            <div class="grid-content add-border" style="display: flex;">
              <span class="text" style="margin-top:auto; margin-bottom:auto;">名称：</span>
            </div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content add-border" style="display: flex;">
              <span class="text" style="margin-top:auto; margin-bottom:auto;">{{store.storeName}}</span>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4">
            <div class="grid-content add-border" style="display: flex;">
              <span class="text" style="margin-top:auto; margin-bottom:auto;">地址：</span>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content add-border" style="display: flex;">
              <span
                class="text"
                style="margin-top:auto; margin-bottom:auto;"
              >{{store.storeLocation}}</span>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content add-border" style="display: flex;">
              <span class="text" style="margin-top:auto; margin-bottom:auto;">{{store.storeAddress}}</span>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4">
            <div class="grid-content add-border" style="display: flex;">
              <span class="text" style="margin-top:auto; margin-bottom:auto;">联系方式：</span>
            </div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content add-border" style="display: flex;">
              <span class="text" style="margin-top:auto; margin-bottom:auto;">{{store.storePhone}}</span>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4">
            <div class="grid-content add-border" style="display: flex;">
              <span class="text" style="margin-top:auto; margin-bottom:auto;">信誉分：</span>
            </div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content add-border" style="display: flex;">
              <span
                class="text"
                style="margin-top:auto; margin-bottom:auto;"
              >{{store.storeIntegrity}}</span>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4">
            <div class="add-border" style="height: 120px; display: flex;">
              <span class="text" style="margin-top:auto; margin-bottom:auto;">招牌图：</span>
            </div>
          </el-col>
          <el-col :span="20">
            <div class="add-border" style="height: 120px; display: flex;">
              <el-image
                style="width: 100px; height: 100px; border: 1px solid #cccccc; margin-top:auto; margin-bottom:auto; margin-left: 10px;"
                :src="storeSign"
                :preview-src-list="[storeSign]"
                fit="contain"
              ></el-image>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4">
            <div class="add-border" style="height: 120px; display: flex;">
              <span class="text" style="margin-top:auto; margin-bottom:auto;">装横图：</span>
            </div>
          </el-col>
          <el-col :span="20">
            <div class="add-border" style="height: 120px; display: flex;">
              <el-image
                style="width: 100px; height: 100px; border: 1px solid #cccccc; margin-top:auto; margin-bottom:auto; margin-left: 10px;"
                :src="storeFront"
                :preview-src-list="[storeFront]"
                fit="contain"
              ></el-image>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4">
            <div class="add-border" style="height: 120px; display: flex;">
              <span class="text" style="margin-top:auto; margin-bottom:auto;">营业执照：</span>
            </div>
          </el-col>
          <el-col :span="20">
            <div class="add-border" style="height: 120px; display: flex;">
              <el-image
                style="width: 100px; height: 100px; border: 1px solid #cccccc; margin-top:auto; margin-bottom:auto; margin-left: 10px;"
                :src="businessLicense"
                :preview-src-list="[businessLicense]"
                fit="contain"
              ></el-image>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "StoreDetail",
  data() {
    return {
      storeIcon: "",
      businessLicense: "",
      storeSign: "",
      storeFront: "",
      store: {},
    };
  },
  components: {},
  methods: {
    init(store) {
      this.store = store;

      this.storeIcon = store.storeIcon;
      this.businessLicense = store.businessLicense;
      this.storeSign = store.storeSign;
      this.storeFront = store.storeFront;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.grid-content {
  min-height: 40px;
}

.add-border {
  border: 1px solid #cccccc;
}

.text {
  font-size: 16px;
  font-weight: bold;
  margin: 10px;
}
</style>
